<template>
    <div class="editor-content">
        <el-upload
                class="avatar-uploader-editer"
                :action="serverUrl"
                :with-credentials="true"
                :show-file-list="false"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :before-upload="beforeUpload">
        </el-upload>
        <uploadModel :dialogVisible="dialogVisible" @uploadArr="uploadArr" @visible="visibleChange"></uploadModel>
        <quill-editor v-model="content"
                      ref="myQuillEditor"
                      :options="editorOption"
                      @blur="onEditorBlur($event)"
                      @focus="onEditorFocus($event)"
                      @change="onEditorChange($event)">
        </quill-editor>
    </div>
</template>
<script>
    import {quillEditor} from "vue-quill-editor"; //调用编辑器
    import uploadModel from '@/components/uploadModel/index.vue'
    import "quill/dist/quill.core.css";
    import "quill/dist/quill.snow.css";
    import "quill/dist/quill.bubble.css";
    // import api from 'api'

    /*

    富文本编辑器 顶部操作按钮配置项：

    1.只需要填写功能名的

    加粗 - bold；
    斜体 - italic
    下划线 - underline
    删除线 - strike
    引用- blockquote
    代码块 - code-block
    公式 - formula
    图片 - image
    视频 - video
    清除字体样式- clean
    这一类的引用 直接['name','name']这种格式就好了

    2.需要有默认值的
    标题 - header
    [{ 'header': 1 }, { 'header': 2 }] 值字体大小

    列表 - list
    [{ 'list': 'ordered'}, { 'list': 'bullet' }], 值ordered，bullet

    上标/下标 - script
     [{ 'script': 'sub'}, { 'script': 'super' }],  值sub，super

    缩进 - indent
    [{ 'indent': '-1'}, { 'indent': '+1' }], 值-1，+1等

    文本方向 - direction
    [{ 'direction': 'rtl' }],    值rtl

    3.有多个值 以下拉列表形式显示

    大小 - size
     [{ 'size': ['small', false, 'large', 'huge'] }],

    标题 - header
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

    4.有系统默认值的功能只需填写一个空数组 就会有出现默认的选项
    颜色 - color
    背景颜色 - background
    字体 - font
    文本对齐 - align
    他们的格式都是
    [{ 'color': [] }, { 'background': [] }],
    [{ 'font': [] }],
    [{ 'align': [] }]
    */
    export default {
        name: "quill",
        props: {
            // 编辑器 顶部按钮 配置项
            edit_config_toolbar: {
                type: Array,
                default: [
                    [
                        "bold",
                        "italic",
                        "underline",
                        "strike",
                        "blockquote",
                        {header: 1},
                        {header: 2},
                        {list: "ordered"},
                        {list: "bullet"},
                        {script: "sub"},
                        {script: "super"},
                        {indent: "-1"},
                        {indent: "+1"},
                        {direction: "rtl"},
                        /* { color: [] }, */
                        /* { background: [] }, */
                        /* { align: [] }, */
                        "image",
                        "clean"
                    ]
                ]
            },
            // 占位符
            placeholder: {
                type: String,
                default: "请输入内容..."
            },
            // 内容区域高度
            contentHeight: {
                type: Number,
                default: 150
            },
            form_father_data: [String]
        },
        model: {
            /* 父组件双向绑定的数据 */
            prop: "form_father_data",
            event: "give_father_data"
        },
        data() {
            return {
                quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
                // serverUrl: api.IMG_UPLOAD_URL,
                content: "",
                dialogVisible:false,
                editorOption: {
                    modules: {
                        toolbar: {
                            container: this.edit_config_toolbar,
                            handlers: {
                                'image': function (value) {
                                    if (value) {
                                        document.querySelector('.avatar-uploader-editer input').click()
                                    } else {
                                        this.quill.format('image', false)
                                    }
                                }
                        }
                    }
                    },
                    placeholder: this.placeholder
                }
            };
        },
        filters: {},
        watch: {
            content(val) {
                this.$emit("give_father_data", val);
            },

            form_father_data(val) {
                this.content = val;
            }
        },
        components: {
            quillEditor,
            uploadModel
        },
        computed: {},
        created() {
        },
        mounted() {
            $(".ql-editor").height(this.contentHeight);
            $(".ql-editor").css("overflow-Y", "auto");

            // 取消数据改变自动获取焦点 -----------
            this.$refs.myQuillEditor.quill.enable(false);
            /* this.hintGetFun(); */
        },
        methods: {
            uploadArr (data) {
                this.showImgArr = data
            },
             //关闭弹框
            visibleChange () {
                this.dialogVisible = false
            },
            // 上传图片前
            beforeUpload(res, file) {
                this.quillUpdateImg = true
            },
            // 上传图片成功
            uploadSuccess(res, file) {
                // res为图片服务器返回的数据
                // 获取富文本组件实例
                let quill = this.$refs.myQuillEditor.quill
                // 如果上传成功
                if (res.retCode === '1000') {
                    // 获取光标所在位置
                    let length = quill.getSelection().index;
                    // 插入图片  res.info为服务器返回的图片地址
                    quill.insertEmbed(length, 'image', res.data)
                    // 调整光标到最后
                    quill.setSelection(length + 1)
                } else {
                    this.$message.error('图片插入失败1')
                }
                // loading动画消失
                this.quillUpdateImg = false
            },
            // 上传图片失败
            uploadError(res, file) {
                // loading动画消失
                this.quillUpdateImg = false
                this.$message.error('图片插入失败2')
            },
            onEditorBlur() {
                //失去焦点事件
            },
            onEditorFocus() {
                //获得焦点事件
                this.$refs.myQuillEditor.quill.enable(true);
            },
            onEditorChange() {
                //内容改变事件
            },

            // --------------------------------------
            /* onEditorChange({ quill, html, text }) {
              this.formHint.hintList[this.hintIndex].hintValue = html;
            },
            async hintGetFun() {
              try {
                let res = await hintGet(this.$route.params.pk);
                if (res.data.code == "S00000") {
                  this.formHint.hintList = res.data.data;
                  //富文本编辑器神坑处理
                  this.$nextTick(function() {
                    this.$refs.myQuillEditor.quill.enable(true);
                    this.$refs.myQuillEditor.quill.blur();
                  });
                }
              } catch (err) {
                console.log(err);
              }
            } */
        }
    };
</script>
<style scoped lang='less'>
</style>
